<template>
  <div class="zy-content ">
    <div class="spareBox">
      <div class="sparelist" v-if="listArr && listArr.length">
        <template v-for="item in listArr">
         <Row>
           <Col span="6" style=" padding: 0 5px;">
             <div class="listItem">
               <div class="listTitle">
                 <span>{{$t('maintenance.SparePart')}}</span>
                 <span>{{item.materielNo}}</span>
               </div>
               <div class="list_col">
                 <span class="text">{{$t('maintenance.SpareNumber')}}</span>
                 <span class="value">{{item.materialCode}}</span>
               </div>
               <div class="list_col">
                 <span class="text">{{$t('maintenance.SparePartsName')}}</span>
                 <span class="value">{{item.goodsName}}</span>
               </div>
               <div class="list_col">
                 <span class="text">{{$t('maintenance.Specification')}}</span>
                 <span class="value">{{item.specification}}</span>
               </div>
               <div class="list_col">
                 <span class="text">{{$t('maintenance.usageAmount')}}</span>
                 <span class="value">{{item.num}}</span>
               </div>
               <div class="list_col">
                 <span class="text">{{$t('maintenance.unitprice')}}</span>
                 <span class="value">{{item.unitPrice}}</span>
               </div>
               <div class="listFooter">
                 <span>共{{item.num}}件</span>
                 <div class="moneyBox">
                   <span class="title_m">{{$t('maintenance.totalamount')}}</span>
                   <span class="value">{{item.totalPrice}}</span>
                 </div>
               </div>
               <div class="listBtnBox" v-if="showStatus">
                 <span class="delete" @click="deleteMaterion(item)">{{$t('maintenance.Delete')}}</span>
                 <span class="edit" @click="editClick(item)">{{$t('maintenance.Edit')}}</span>
               </div>
             </div>
           </Col>
         </Row>
        </template>
      </div>
      <div class="noneList" v-else>
                   <span class="img_box">
                     <img src="@/assets/imgs/maintenance/nonelist.png"/>
                   </span>
        <span class="noneListText">{{$t('maintenance.noData')}}</span>
      </div>
      <div class="spareBn">
        <span @click="addSpareinfo" v-if="showStatus">{{$t('maintenance.Add')}}</span>
        <span @click="cancelBack">返回</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getDatatools,deleMaterielNo} from "@/api/maintenance";
export default {
  name: "addspare",
  data(){
    return {
        listArr:[],
      showStatus:true
    }
  },
  mounted() {
    this.getDatalist()
    this.$nextTick(()=>{
      if (Number(this.$route.query.status) === 4 || Number(this.$route.query.status) === 2 || Number(this.$route.query.status) === 3){
        this.showStatus = false
      }else {
        this.showStatus = true
      }
    })
  },
  methods:{
    cancelBack(){
      const query ={
        itemId:this.$route.query.itemId,
        taskId:this.$route.query.taskId,
        orgId:this.$route.query.orgId,
        itemProject:this.$route.query.itemProject,
        status:this.$route.query.status,
        callback:2
      }
      this.$router.replace({
        path:'/detailinfo',
        query
      })
    },
    editClick(data){
      this.$store.commit('detail/SET_SHARELIST',data)
      const query = {
        itemId:data.itemId,
        taskId:data.taskId,
        orgId:this.$route.query.orgId,
        status:'edit'
      }
      this.$router.push({
        path:'/editspare',
        query
      })
    },
    deleteMaterion(item){
      this.$store.commit('detail/SET_SHARELIST',{})
      const params = {
        itemId:item.itemId,
        taskId:item.taskId,
        id:item.id
      }
      deleMaterielNo(params).then(res=>{
        if (res.code == 200){
          this.getDatalist()
        }else {
          this.$Message.warning(res.msg)
        }
      })
    },
    getDatalist(){
      this.listArr = []
      const { itemId,taskId } = this.$route.query
      getDatatools({ itemId,taskId }).then(res=>{
        if (res.data.materialList && res.data.materialList.length){
          this.listArr = this.listArr.concat(res.data.materialList)
        }
      })
    },
    addSpareinfo(){
      this.$store.commit('detail/SET_SHARELIST',{})
      const query = {
        itemId:this.$route.query.itemId,
        taskId:this.$route.query.taskId,
        orgId:this.$route.query.orgId,
        status:'add'
      }
      this.$router.push({
        path:"/editspare",
        query
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
